<template>
	<view class="month-selector">
		<view class="month" v-for="month in months" :key="month" @click="selectMonth(month)">
			<view :class="{ selected: selectedMonth == month }">

				<span>{{ month }}月</span>
				<img v-if="selectedMonth==month" src="../../static/submit.png" alt="Overlay Image"
					class="overlay-image" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue';

	const months = [
		'1', '2', '3', '4', '5', '6',
		'7', '8', '9', '10', '11', '12'
	];

	const selectedMonth = ref('');
	selectedMonth.value = new Date().getMonth() + 1;
	const emit = defineEmits(['monthSelected']);

	const selectMonth = (month) => {
		selectedMonth.value = month;
		emit('monthSelected', month);
	};
</script>

<style scoped>
	.month-selector {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10px;
		height: 120px;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.month {

		position: relative;
		cursor: pointer;
		width: 70px;
		height: 35px;
		line-height: 35px;
		color: #0C5FFA;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		border-radius: 10rpx;
		background-color: #fff;
		border: 1px solid #0C5FFA;
		margin: 5px;


	}


	.selected {
		border-radius: 10rpx;
		background-color: #fff;
		border: 0;
		border: 1px solid #0C5FFA;
		font-size: 24rpx;
		font-weight: 500;
		color: #fff;
		background-color: #0C5FFA;

	}


	.overlay-image {
		background-color: rgba(12, 95, 250, 0.3);
		border-radius: 5px;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		object-fit: cover;
	}
</style>